import {
  useCallback, useEffect, useMemo, useState,
} from 'react';
import { Drawer, Image } from 'antd'
import { getProjectDetailApi } from '../api/pro';

export const WithEchartResize = (instance) => {
  useEffect(() => {
    const handleEchartResize = () => {
      instance.resize()
    }
    window.addEventListener('resize', handleEchartResize)
    return () => {
      window.removeEventListener('resize', handleEchartResize)
    }
  }, [instance])
}

export const WithDetailDrawer = () => {
  const [visible, setVisible] = useState(false)
  const [detail, setDetail] = useState(null)
  const handleShowDrawer = useCallback(async ({ proid }) => {
    setVisible(true)
    setDetail(null)
    try {
      const detailItem = await getProjectDetailApi(proid)
      setDetail(detailItem)
      console.log(detailItem)
    } catch (error) {
      console.log(error)
    }
  }, [])
  const detailDrawer = useMemo(() => (
    <Drawer title="商品详情" placement="right" onClose={() => setVisible(false)} visible={visible}>
      <Image
        width={'100%'}
        src={detail && detail[0].banners[0]}
        fallback=""
      />
      <p style={{ lineHeight: 2 }}>{detail && detail[0].desc}</p>
      <pre>
        {detail && JSON.stringify(detail, null, 2)}
      </pre>
    </Drawer>
  ), [visible, detail])
  return {
    detailDrawer,
    check: handleShowDrawer,
  }
}
